<template>
  <view class="k-wrap">
    <!-- 背景图 -->
    <view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;">
      <image src='http://172.16.1.181:8880/images/wccQQP.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
    </view>
    <!-- 轮播图 -->
    <swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#ffffff" indicator-active-color="#ffffff" style="margin-top: -320upx;">
      <swiper-item v-for="(item,index) in swipers" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 标题 -->
    <KTitleHeader title="酷 / 炫 / 组 / 件"></KTitleHeader>
    <KNavCard :datas="kuxuan"></KNavCard>
    <KTitleHeader title="样 / 式 / 模 / 板"></KTitleHeader>
    <KNavCard :datas="yangshi"></KNavCard>
    <KTitleHeader title="付 / 费 / 组 / 件"></KTitleHeader>
    <KNavCard :datas="fufei"></KNavCard>
    <KTitleHeader title="设 / 计 / 模 / 版"></KTitleHeader>
    <KNavCard :datas="Template"></KNavCard>
  </view>
</template>

<script>
import KTitleHeader from '@/components/K-Title-Header.vue'
import KNavCard from '@/components/K-Nav-Card.vue'
import data from '@/common/data.js'
export default {
  components: {
    KTitleHeader,
    KNavCard
  },
  data() {
    return {
      swipers: data.swipers,
      cardCur: 0,
      Template: [
        {
          url: 'gamecube',
          name: 'App设计',
          bgColor: '#F33F5A'
        },
        {
          url: 'gamecube',
          name: '网站设计',
          bgColor: '#954FF6'
        },
        {
          url: 'gamecube',
          name: 'Logo设计',
          bgColor: '#5177EE'
        },
        {
          url: 'gamecube',
          name: '海报设计',
          bgColor: '#FFC32E'
        }
      ],
      kuxuan: [
        {
          url: 'mapLocus',
          name: '地图轨迹',
          bgColor: '#FF5656'
        },
        {
          url: 'sign',
          name: '电子签名',
          bgColor: '#6F68DF'
        },
        {
          url: 'charts',
          name: '图表展示',
          bgColor: '#9c26b0'
        },
        {
          url: 'district',
          name: '行政区图',
          bgColor: '#0070FF'
        },
        {
          url: 'poster',
          name: '海报生成器',
          bgColor: '#1cbbb4'
        },
        {
          url: 'company',
          name: '自定义相机',
          bgColor: '#BC78EC'
        },
        {
          url: 'keyboard',
          name: '自定义键盘',
          bgColor: '#f39902'
        },
        {
          url: 'chat/chat',
          name: '聊天功能',
          bgColor: '#19CF8A'
        },
        {
          url: 'seat',
          name: '在线选座',
          bgColor: '#8799a3'
        },
        {
          url: 'photoWall/photoAll',
          name: '照片墙下载',
          bgColor: '#0396FF'
        },
        {
          url: 'search',
          name: '便捷查询',
          bgColor: '#00c4fb'
        },
        {
          url: 'openDocument',
          name: '文档预览',
          bgColor: '#FFC32E'
        },
        {
          url: 'pano',
          name: 'webview地图轨迹',
          bgColor: '#a5673f'
        },
        {
          url: 'drag_demo/index',
          name: '悬浮球',
          bgColor: '#8DC63F'
        },
        {
          url: 'request',
          name: '模拟数据加载',
          bgColor: '#FF5656'
        }
      ],
      yangshi: [
        {
          url: 'login/index',
          name: '登陆页合集',
          bgColor: '#F33F5A'
        },
        {
          url: 'login/wxLogin',
          name: '微信授权登陆',
          bgColor: '#954FF6'
        },
        {
          url: 'discern',
          name: '证件识别',
          bgColor: '#5177EE'
        },
        {
          url: 'salary',
          name: '排行榜',
          bgColor: '#FFC32E'
        },
        {
          url: 'course',
          name: '数据列表',
          bgColor: '#FF4F94'
        },
        {
          url: 'details',
          name: '通用详情页',
          bgColor: '#0acffe'
        },
        {
          url: 'details_wares',
          name: '商品详情页',
          bgColor: '#BC78EC'
        },
        {
          url: 'takePicture',
          name: '摄影师资料',
          bgColor: '#a5673f'
        },
        {
          url: 'clock',
          name: '每日签到',
          bgColor: '#8DC63F'
        },
        {
          url: 'timetables',
          name: '课程表',
          bgColor: '#FF4F94'
        },
        {
          url: 'bggrad',
          name: '渐变动画',
          bgColor: '#BC78EC'
        },
        {
          url: 'bgcolor',
          name: '纯色过渡',
          bgColor: '#f39902'
        },
        {
          url: 'ancube',
          name: '立方体',
          bgColor: '#0070FF'
        },
        {
          url: 'anloading',
          name: '加载动画',
          bgColor: '#8799a3'
        }
      ],
      fufei: [
        {
          url: 'posterList',
          name: '海报设计(¥699)',
          bgColor: '#F33F5A'
        },
        {
          url: 'customCamera',
          name: '图片编辑器(¥199)',
          bgColor: '#954FF6'
        }
      ]
    }
  },
  methods: {
    cardSwiper(e) {
      this.cardCur = e.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
.card-swiper {
  height: 550upx !important;
}

.card-swiper swiper-item {
  width: 260upx !important;
  left: 245upx;
  box-sizing: border-box;
  padding: 0upx 15upx 50upx 15upx;
  overflow: initial;
  /* margin: 100rpx 0; */
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  border-radius: 10upx;
  transform: scale(0.7);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
}
</style>
